<template>
  <div class="add-ti">
    <ckeditor id="ck" v-model="quesData.content" :height="'90px'" :placeholder="'请输入题干'"></ckeditor>
    <addUploads :quesFileList="quesData.quesFileList"></addUploads>
    <div v-if="quesType == 7">
      <div class="matching-box-s">
        <div class="matching-sm-li" v-for="(item,index) in quesData.options.s" :key="index">
          <span style="line-height: 44px;font-size: 16px;">{{index+1}}、</span>
          <div class="matching-input">
            <ckeditor id="ck" v-model="item.content" :height="'40px'" :placeholder="'请输入内容'"></ckeditor>
          </div>
          <a-select style="width: 94px" v-model="item.optionSelectContent" placeholder="未选择">
            <a-select-option
              :value="key"
              v-for="(Miten,key) in quesData.options.m"
              :key="key"
            >{{Alphabet[key]}}</a-select-option>
          </a-select>
          <div class="matching-controls">
            <i
              class="Ti-icon matching-icon icon-delete"
              @click.prevent="setSOptions(index,'delete')"
            ></i>
            <i class="Ti-icon matching-icon icon-plus-circle" @click.prevent="setSOptions(index,'circle')">&nbsp;添加选项</i>
          </div>
        </div>
      </div>
      <div class="matching-box-m">
        <div class="matching-sm-li" v-for="(item,index) in quesData.options.m" :key="index">
          <span style="line-height: 44px;font-size: 16px;">{{Alphabet[index]}}、</span>
          <div class="matching-input">
            <ckeditor id="ck" v-model="item.content" :height="'40px'" :placeholder="'请输入内容'"></ckeditor>
          </div>
          <div class="matching-controls">
            <i class="Ti-icon matching-icon icon-delete" @click.prevent="setMOptions(index,'delete')"></i>
            <i class="Ti-icon matching-icon icon-plus-circle" @click.prevent="setMOptions(index,'circle')">&nbsp;添加选项</i>
          </div>
        </div>
      </div>
      <div style="line-height: 37px;margin-bottom: 10px;">
        参考答案：
        <span v-for="(item,index) in quesData.options.s" :key="index">
            {{Alphabet[item.optionSelectContent] || '未选择'}}
            <label v-if="index < quesData.options.s.length-1">、</label>
        </span>
      </div>
    </div>
    <div>
      <span style="line-height: 37px;">答案解析：</span>
      <div style="display: inline-block;width: calc(100% - 100px);vertical-align: top;">
        <ckeditor id="ck" v-model="quesData.analysis" :height="'90px'" :placeholder="'请输入解析'"></ckeditor>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    };
  },
  components: {
    addUploads
  },
  props: {
    quesData: {
      type: Object,
      default: () => {}
    },
    quesType: {
      type: Number,
      default: 0
    }
  },
  mounted() {},
  methods: {
    setSOptions(index, type) {
      if (type == 'delete') {
        //删除
        if (this.quesData.options.s.length > 2) {
            this.quesData.options.s.splice(index, 1);
        } else {
            this.$message.warning('匹配题至少2个选项');
        }
      } else if (type == 'circle') {
        //添加
        let add = { content: '', optionSelectContent: undefined };
        if (this.quesData.options.s.length < 26) {
          this.quesData.options.s.splice(index + 1, 0, add);
        } else {
          this.$message.warning('至多26个选项');
        }
      }
    },
    setMOptions(index, type) {
      if (type == 'delete') {
        //删除
        if (this.quesData.options.m.length > 2) {
          this.quesData.options.m.splice(index, 1);
          this.quesData.options.s.forEach(item=>{
            if(item.optionSelectContent === index){
              item.optionSelectContent = undefined
            }else if(item.optionSelectContent > index){
              item.optionSelectContent -= 1
            }
          })
        } else {
            this.$message.warning('匹配题至少2个选项');
        }
      } else if (type == 'circle') {
        //添加
        let add = { content: '', optionSelectContent: undefined };
        if (this.quesData.options.m.length < 26) {
          this.quesData.options.m.splice(index + 1, 0, add);
        } else {
          this.$message.warning('至多26个选项');
        }
        
      }
    }
  }
};
</script>

<style>
</style>